<template>
  <div id="tableHeaderContainer" class="relative" :style="{ zIndex: 9 }">
    <a-card :bodyStyle="{ padding: '0 0 20px' }" size="small" :bordered="false">
      <slot name="table-header-before"></slot>
      <div class="flex justify-between">
        <slot name="table-summary">
          <!-- 空div 为了能让 table-config 默认居右 -->
          <div></div>
        </slot>
        <slot name="table-config"></slot>
      </div>
      <slot name="table-header-after"></slot>
    </a-card>
  </div>
</template>

<script lang="ts">
  import { defineComponent, nextTick, onMounted, ref } from 'vue'

  export default defineComponent({
    name: 'TableHeader',
    setup() {
      const showSearchContent = ref(false)
      const target = ref<HTMLElement | null>(null)
      onMounted(() => {
        nextTick(() => {
          target.value = document.getElementById('tableHeaderContainer')
        })
      })
      return {
        showSearchContent,
        target
      }
    },
  })
</script>
<style lang="less" scoped>
  :deep(.arco-drawer-footer) {
    border-bottom: 2px solid #f5f5f5;
  }
</style>
